<template>
	<view class="bgg">
		<u-navbar title="服务中心" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000">
			<view class="u-nav-slot s-font-30 s-color-w" slot="right" v-if="!editeBool && this.serviceInfo && this.serviceInfo.isDefault != 1" @click="toPage('/pages/serviceCenter/editeInfo')">修改信息</view>
		</u-navbar>
    <view class="w-100" style="height: 20rpx;"></view>
    <view class="boxContent flex color-r border-box line-h-80 b-r-10 bg-white" v-if="this.serviceInfo && this.serviceInfo.centerStatus">
      <u-icon name="info-circle" color="#e60000" size="24"></u-icon>
      <view class="font-14 font-b">该服务站当前已被禁用，请联系管理员处理</view>
    </view>
    
    <view class="s-p-20 s-border-box s-w-100">
      <view class="s-w-100 s-bg-red1 s-b-r-10 s-p-20 s-border-box">
        <view class="s-flex s-justify-between s-m-b-10">
          <view class="s-color-w s-m-t-10 s-font-32 s-font-b">{{ serviceInfo.centerName }}</view>
          <u-icon name="grid" color="#ffffff" size="24" @click="disPlayClick"></u-icon>
        </view>
        <view class="hr s-w-100 s-bg-white s-m-t-10"></view>
        <view class="s-flex s-justify-between s-line-h-80 s-m-t-10">
          <view class="s-font-30 s-color-w">总额度: {{ allFundsData.allCount }}</view>
          <view class="btns s-b-r-10 s-bg-white s-text-center s-color-r s-m-t-10" @click="toPage('/pages/serviceCenter/detailLog')">额度明细</view>
        </view>
        <view class="s-flex s-justify-between s-line-h-80">
          <view class="s-font-30 s-color-w">剩余额度: {{ allFundsData.remainingCount }}</view>
          <!-- <view class="btns s-b-r-10 s-bg-white s-text-center s-color-r s-m-t-10">业绩报表</view> -->
        </view>
        <!-- <view class="s-flex s-justify-between s-line-h-80">
          <view class="s-font-30 s-color-w">总报单量: {{ allFundsData.orderCount }}</view>
        </view> -->
      </view>
    </view>


    <view>
			<u-tabs :list="listTab" lineColor="#e60000" :itemStyle="{width: '33.3%', height: '60rpx'}" :activeStyle="{color: '#e60000'}" :is-scroll="false" :current="current" @change="handelTab"></u-tabs>
    </view>

    <view class="s-p-20 s-border-box s-w-100">
      <view class="s-w-100 s-bg-white s-b-r-10 s-p-20 s-border-box s-m-b-20" v-for="(item,index) in dataList" :key="index">
        <view class="s-flex s-justify-between s-line-h-80">
          <view class="s-color-gray">{{ item.nickName }} {{ item.mobile }}</view>
          <view :class="item.state == 2 ? 'color-g70' : item.state == 3 ? 'color-r' : 's-color-gray'">{{item.state | getValue(listTab)}}</view>
        </view>
        <view class="hr s-bg-g  s-m-b-20"></view>
        <view class="s-line-h-50 s-color-gray">
          <view>用户ID: {{item.userId}}</view>
          <!-- <view>报单数量: {{item.buyCount}}</view> -->
          <view>总金额: {{item.money}}</view>
          <view>提交日期: {{item.createTime}}</view>
          <view>备注: {{item.remark}}</view>
          <view class="s-flex s-justify-between">
            <view class="color-gray">打款凭证</view>
            <view class="flex-1 flex justify-end">
              <u--image :showLoading="true" v-for="(img,index) in item.certificateUrls" :key="index" :src="img" width="100rpx" height="100rpx" @click="lookImg(img)" />
            </view>
          </view>
          <view v-if="item.state == 3 || item.state == 2">审核时间: {{  item.auditTime }}</view>
          <view v-if="item.state == 3">审核备注: {{  item.auditRemarks }}</view>
        </view>
        <view class="s-flex s-flex-end s-m-t-20" v-if="current == 0">
          <view class="s-bg-red s-color-w s-p-l-40 s-p-r-40 s-b-r-40 s-p-t-5 s-p-b-5 s-font-28" @click="passBtn(item)">通过</view>
          <view class="s-m-l-20 s-color-r border-r s-p-l-40 s-p-r-40 s-b-r-40 s-p-t-5 s-p-b-5 s-font-28" @click="refuseBtn(item)">拒绝</view>
        </view>
      </view>
      <empty :show="dataList.length == 0" />
      <view class="color-g w-100 line-h-100 text-center">暂无更多数据...</view>
    </view>

    <!-- 审核拒绝 -->
    <u-popup :show="refuseBool" @close="close" round="10" mode="center">
      <view style="width:600rpx" class="s-p-l-10 s-p-r-10">
        <view class="s-w-100 s-bg-white s-b-r-10 s-p-20 s-border-box s-m-b-20">
          <view class="s-flex s-justify-between s-line-h-80">
            <view class="s-color-gray">{{ clickData.nickName }} {{ clickData.mobile }}</view>
            <view :class="clickData.state == 2 ? 'color-g70' : clickData.state == 3 ? 'color-r' : 's-color-gray'">{{clickData.state | getValue(listTab)}}</view>
          </view>
          <view class="hr s-bg-g  s-m-b-20"></view>
          <view class="s-line-h-50 s-color-gray">
            <view>用户ID: {{clickData.userId}}</view>
            <!-- <view>报单数量: {{clickData.buyCount}}</view> -->
            <view>总金额: {{clickData.money}}</view>
            <view>提交日期: {{clickData.createTime}}</view>
            <view>备注: {{clickData.remark}}</view>
            <view>
              <view class="color-gray">打款凭证</view>
              <view class="flex-1 flex justify-end">
                <u--image :showLoading="true" v-for="(img,index) in clickData.certificateUrls" :key="index" :src="img" width="100rpx" height="100rpx" @click="lookImg(img)"></u--image>
              </view>
            </view>
          </view>
          <textarea v-model="remark" class="s-m-t-20 s-font-28 s-bg-g s-p-20 s-border-box s-b-r-10" cols="30" rows="10" placeholder="(必填)请填写报单拒绝原因"></textarea>
          <view class="s-flex s-flex-end s-m-t-20">
            <view class="s-bg-red s-color-w s-p-l-60 s-p-r-60 s-b-r-40 s-p-t-10 s-p-b-10 s-font-28" @click="refuseComfirm">确认拒绝</view>
            <view class="s-m-l-20 s-color-r border-r s-p-l-60 s-p-r-60 s-b-r-40 s-p-t-10 s-p-b-10 s-font-28" @click="refuseBool = false">取消</view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 查看站长信息  -->
    <u-popup :show="disPlayBool" @close="disPlayBool = false" round="10" mode="center">
      <view style="width:600rpx" class="p-l-20">
        <view class="s-w-100 s-bg-white s-b-r-10 s-p-20 s-border-box s-m-b-20">
          <view class="s-w-100 s-text-center s-line-h-80 s-font-36 s-font-b s-m-t-10 p-r-20 border-box">{{ serviceInfo.centerName }}</view>
          <view class="s-text-center s-font-26 s-color-g s-m-t-10 p-r-20 border-box">电话: {{ userInfo.mobile }}</view>
          <view class="s-flex flex-row-center s-m-t-20">
						<l-painter class="m-l-10">
							<l-painter-qrcode :text="pathImg+'/#/pages/serviceCenter/serviceCenterInfo?serviceCenterId='+serviceInfo.id" css="width: 240px; height: 210px;" />
						</l-painter>
          </view>
        </view>
      </view>
    </u-popup>

	</view>

</template>

<script>
  import config from '@/common/config/config.js';
  const http = config.env
	import { mapState } from 'vuex';
  import { getAllFunds, getCentreList, getFindCenterInfo, passApprovance, refuseApprovance } from '@/common/api/serviceCenter.js'
	export default {
		data() {
			return {
				pathImg:http.basePageUrl,
        qrCodeSrc: '',
        showLoading:false,//图片是否生成好
        serviceInfo:{}, //服务商信息
        allFundsData: {}, // 额度信息
        current: 0,
        editeBool: false,
        disPlayBool:false,
        remark: null,
        refuseBool:false,
        queryList:{
          state: 0,
          pageNo: 1,
          pageSize: 5
        },
				listTab:[
          { name: '待审核',status: 0}, 
          { name: '已通过',status: 2}, 
          { name: '已拒绝',status: 3}
        ],
        dataList:[],
        listTotal: 0,
        loading: 'more',
        clickData:{},
			};
		},
    filters:{
      getValue(val,arr){
        let status = arr.find(item => item.status == val);
        return status?.name || '';
      }
    },
		computed: {
			...mapState('user', ['userInfo']),
		},
    onShow(){
      this.getFunds();
      this.getCentre();
      this.getUserInfo()
    },
    onReachBottom(){
      if(this.loading == 'more'){
        this.queryList.pageNo++;
        this.getCentre();
      }
    },
		methods: {
			
			disPlayClick(){
				this.disPlayBool = true
			},
			close(){
        this.refuseBool = false
			},
      // 点击拒绝 
      refuseBtn(data){
        this.clickData = data
        this.refuseBool = true
      },
      // 拒绝请求
      refuseComfirm(){
        let that = this
        // 审核拒绝时，理由必填
        if(!that.remark){
          uni.showToast({
            title: '请填写审核拒绝理由',
            icon: 'none'
          });
          return
        }
        that.refuseBool = false
        setTimeout( () => {
          uni.showModal({
            title: '审核提示',
            content: '是否确认审核拒绝？',
            success: (res) => {
              if (res.confirm) {
                let parmas = {
                  id: that.clickData.id,
                  auditRemarks: that.remark
                }
                refuseApprovance(parmas).then(res => {
                  if(res.code == 200){
                    uni.showToast({
                      title: '审核拒绝成功',
                      icon: 'none'
                    });
                    that.getCentre();
                  }else{
                    uni.showToast({
                      title: res.msg,
                      icon: 'none'
                    });
                  }
                })
              }
            }
          });
        },200)
      },
      // 审核通过
      passBtn(data){
        let that = this;
        uni.showModal({
          title: '审核提示',
          content: '是否确认通过审核？',
          success: (res) => {
            if (res.confirm) {
              let parmas = {
                id: data.id,
                appropriationMoney: data.money
              }
              passApprovance(parmas).then(res => {
                if(res.code == 200){
                  uni.showToast({
                    title: '审核通过',
                    icon: 'none'
                  });
                  that.getCentre();
                }else{
                  uni.showToast({
                    title: res.msg,
                    icon: 'none'
                  });
                }
              })
            }
          }
        });
      },
			// 预览图片 
			lookImg(url){
				uni.previewImage({
					urls: [url]
				});
			},
      // 获取服务中心个人信息
      getUserInfo(){
        getFindCenterInfo().then(res => {
          if(res.code == 200){
            this.serviceInfo = res.data
          }
        })
      },
      // 顶部额度
      getFunds(){
        getAllFunds().then(res => {
          if(res.code == 200){
            this.allFundsData = res.data;
          }
        })
      },
      // 审核列表
      getCentre(){
        this.loading = 'more'
        getCentreList(this.queryList).then(res => {
          if(res.code == 200){
            if(this.queryList.pageNo == 1){
              this.dataList = res.data
            }else{
              this.dataList = this.dataList.concat(res.data)
            }
            if(this.queryList.pageNo * this.queryList.pageSize >= res.extend.total){
              this.loading = 'noMore'
            }
          }
        })
      },
      // 切换tab
			handelTab(e){
        this.queryList.state = e.status;
        this.queryList.pageNo = 1;
        this.current = e.index;
        this.getCentre();
      },
      // 跳转到明细
      toPage(url){
        uni.navigateTo({
          url: url
        });
      }
		}
	}
</script>
<style lang="scss" scoped>
@import '@/common/css/common_sun.scss';
.bgg{
	background: #F2F2F2 !important;
  min-height: 100vh;
}
.boxs{
  height: 200rpx;
}
.btns{
  width: 160rpx;
  height: 60rpx;
  border-radius: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
.hr{
  height: 2rpx;
}
.border-red{
  border: 2rpx solid #e60000;
}
.boxContent{
  width: calc(100% - 40rpx);
  margin: 0rpx auto;
	padding-left: 20rpx;
	box-sizing: border-box;
}
</style>